/*prj2 css*/

/* TODOs:
* use vs to test on ie6

*check doublechecks. 

* doublecheck all ? taken care of
    
*/

/* #region Initializing Resets */
/* 
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   Reset these elements to a baseline value.
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}
/* Removed the ol or it prevents the ol from putting a number at beginning of the list items. */
ul {
    list-style: none;
}
/* #endregion */



/* #region body styling */
body {
    /* ie the browser window */
    background-color: #001c56; /* The icy dark blue from the feature image using Visual Studio's eyedropper feature. */
}
/* #endregion */


/* #region Flex-grid styling */
/*(widths, margins, padding, heights, img, background img, etc)*/
.blog {
    width: 100%; /* 820px/820px= 1.00 = 100%  */

    /* As seen in the textbook, here is the way the background image should be done with a 418px tanstition point*/
    /*background: #a0abca url("main_bg.png") repeat-y 50.9756097561% 0;*/ /* 418/820= 0.509756097561 */
    /* But this doesn't work properly. The sidebar doesn't quite fit in the right column, and flexes even worse to extremely small windows, resulting in the sidebar hanging over the faux column it's supposed to be contained in. */

    /* Here is the workaround I used to correct it:*/
    background: #a0abca url("../Images/main_bg.png") repeat-y 53.2926829268% 0;
    /* It looks to me like the main_bg.png image has the transition point off by about 20px or so, breaking at about 438 instaed of 418. See my bg_img_tst page. By verifying with Paint: img width: 4500; Transition: 2403. 2403/4500=53.4%. On 820px, the transition would be 820*0.534= 437.88. Drop extra as per textbook leaves 437. 437-418 leaves a difference of 19px. To compensate for the difference without redoing the image, add 19 to force the the transition point to occur at 418 like the comp wants. Thus (418 + 19) / 820 = .532926829268 */
    /* #a0abca is the light gray from the feature image using the eyedropper in Visual Studio.*/
}

    .blog h1 {
        width: 86.3414634146%; /* 828px-120px (padding)/820px= 0.863414634146  */
        padding: .541666666667em 0 .541666666667em 14.6341463415%;
        /* padding for top and bottom: ((50-24)/2)/24= 0.541666666667 */
        /* 120px/820px= .146341463415 -- Padding to give a margin to the left side. */
        /* Need a relative height to prevent bleedover when the window is shrunk excessively, but the height of its containing element is variable depending on the size of the content, so it needs to be related to the font size of the header text to get the value. 50px (desired height) - 24px (font size) gives the total for the padding needed to get a 50px height (=26px). Dividing that by 2 yields the top and bottom padding value (13px). Divide that by 24 to get the relative value for the padding ( 0.541666666667 ). But which to use? Both em and % are relative measures. The difference is what each is relative to. Em is always relative to font size. % is relative to the containing block, usually the body, a div, or a table, unless applied to font-size, in which case it applies to the parent font-size. ( http://css-discuss.incutio.com/wiki/Em_Vs_Percent_Widths ) So, using ems to relate it to the font size rather than the containing element results in .541666666667em. */
        background-color: #00021e; /* The super dark blue from the feature image using the eyedropper in Visual Studio. */
    }

.feature {
    width: 70.7317073171%; /*  580px/820px= .707317073171  */
    margin: 20px 0 20px 21.9512195122%; /*  3x40px (cols) + 3x20px (gutters) = 180px; 180px/820px= 0.219512195122. A relative height is unneccesary here.*/
    padding-bottom: 2%; /* Just a little for appearance */
    background-color: #2e7aa4; /* The icy slate blue from the image using the eyedropper in Visual Studio.*/
}

    .feature h1 {
        width: 78.6206896552%; /*  456px/580px= .786206896552 */
        height: 10%; /* 30px/300px= .10 */
        /* The desired height of the header divided by the given height of the containing element. Without a relative height, the contents bleed out of the boundaries of the containing element upon excessive shrinking of the window. With guidelines for both the header height (30px) and the containg element height (300px) given in the comp, finding the relative height is easy.*/
        padding: 1% 1% 1% 5.4824561404%; /*  25px/456px= .054824561404  */
        position: relative;
        top: -25px; /* Combined with relative positioning, it raises the heading a bit to overlap the image to add visual interest. */
        z-index: +1; /* Layers it on top of the img. */
        background-color: #00021e; /* The super dark blue from the feature image using the eyedropper in Visual Studio. */
    }

    .feature img {
        width: 100%;
        height: 75%; /* Using trial and error (like the textbook used to find a good page width relative value) to make it flexible so the text won't overflow the bottom of the feature container. */
        position: static; /* Without this, the z-index for the header breaks the image when it positions up, causing half the image to disappear. */
    }

    .feature p {
        width: 77.5862068966%; /*  450px/580px= .775862068966  */
        margin-left: 10.3448275862%; /*  60px/580px= .103448275862  */
    }

.figure {
    width: 40%; /*  140px/350px= .4  */
    float: right;
    margin: 0 0 1% 3.5%; /* Just a little for appearance. */
}

img {
    max-width: 100%; /* Prevents image from overflowing the figure's  boundaries when too big for the container. */
}

.logo {
    /* original size = 220px x 220px */
    margin: -10px 0 0 -7.3170731707%; /*  -10px absolute value for top. -60px/820px= -.073170731707 for left margin. */
    width: 26.8292682927%; /* 220px/820px= .268292682927 */
    float: left;
}

.main {
    width: 41.4634146341%; /* 340px/820px= 0.414634146341  */
    margin: 2% 0 2% 7.3170731707%; /*  60px/820px= .073170731707  */
    padding: 0;
    float: left;
}

    .main p {
        margin-bottom: 1em;
    }

nav {
    width: 100.9756097560976%; /* 828px/820px = 1.009756097560976*/
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: #0ca5b0; /* The aqua blue from the logo using the eyedropper in Visual Studio. */
}

    nav ul {
        margin-left: 29.2682926829%; /* 4x40px (columns) + 4x20px (gutters) / 820px = 0.292682926829. */
    }

        nav ul li {
            margin-right: 7.4013157895%; /* 45px/608px = .074013157895 */
            display: inline;
        }

.page {
    /* From comp -- total window width reference boundaries: 16x40px (columns) + 15x20px (gutters) = 640 + 300 = 940. As per the exemplification in the textbook, the 2x40px gutters on each side are not included. The pink outer columns signify the outer limits for purposes of finding the relative values. */
    width: 87.2340425532%; /* 820px/940px = 0.872340425532 */
    margin: 36px auto 0; /* A relative top margin is unnecccessary here. */
    background-color: #e0d1e6; /* An icy purplish-white from the feature image using Visual Studio's eyedropper feature. */
}


.sidebar {
    width: 34.1463414634%; /*  280px/820px = .34146341s4634  */
    margin: 2% 3% 0 9.756097561%; /*  80px/820px = .09756097561  */
    float: left; /* As done in the flex_images example code. */
}

    .sidebar h2 {
        border-bottom: 2px dotted #00021e; /* The super dark blue from the feature image using the eyedropper in Visual Studio. */
        padding-bottom: .25em;
    }

    .sidebar li {
        border-bottom: 2px dotted #00021e; /* The super dark blue from the feature image using the eyedropper in Visual Studio. */
    }

    .sidebar ol {
        padding-left: 6.4285714286%; /* 18px/280px = 0.064285714286 */
    }

        .sidebar ol li h3 {
            padding-top: .33em;
        }

        .sidebar ol li p {
            padding: .33em 0 .75em 0;
        }
/* #endregion */




/* #region Typographical Styling*
/* (font fams, sizes, colors, etc?) */
article p {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.blog h1 {
    font-family: 'Sigmar One', cursive;
    font-size: 1.5em; /* 24px/16px= 1.5 */
    color: #d8edfd; /* The icy white from the feature image using Visual Studio's eyedropper feature. */
}

body {
    font-family: 'Share Tech', sans-serif;
}

.feature h1 {
    font-family: 'Bangers', cursive;
    font-size: 1.5em; /* 24px/16px = 1.5 */
    color: #d8edfd; /* The icy white from the feature image using Visual Studio's eyedropper feature. */
}


.feature p {
    color: white;
    font-family: 'Share Tech', sans-serif;
}

.figcaption {
    font-weight: bold;
    font-family: 'Indie Flower', cursive;
}

.main article {
    font-size: 1em; /* 16px (desired size from the comp) / 16px (the default size) = 1 */
    font-family: 'Share Tech', sans-serif;
}

nav {
    font-size: 1.0625em; /* 17px (desired size from comp) / 16px (the default size) =  1.0625*/
    font-family: 'Indie Flower', cursive;
    font-weight: bold;
}

    nav ul li a {
        text-decoration: none;
    }

        nav ul li a:link {
            color: white;
        }

        nav ul li a:visited {
            color: #6e6596; /* The purple from the feature image using the eyedropper in Visual Studio. */
        }

        nav ul li a:hover /* Hover must come after visited and link to work. (http://www.w3schools.com/cssref/sel_hover.asp) Trying to alphabetize it broke it. */ {
            color: #f58220; /* The orange from the logo using Visual Studio's eyedropper feature. */
        }

        nav ul li a:active {
            /* Ditto for active -- It must come after hover to work. (http://www.w3schools.com/cssref/sel_active.asp) Trying to alphabetize it broke it. */
            color: #4e3f30; /* The brownish-gray from the logo border using Visual Studio's eyedropper feature. */
        }

.page {
    font-family: 'Share Tech', sans-serif;
}

.sidebar h2 {
    font-family: 'Sigmar One', cursive;
    color: #00021e; /* The super dark blue from the feature image using the eyedropper in Visual Studio. */
    font-size: 1.40em; /* A little smaller than h1; a little bigger than h3. */
}

.sidebar ol li h3 {
    font-family: 'Indie Flower', cursive;
    font-size: 1.35em;
    color: #001c56; /* The icy dark blue from the feature image using Visual Studio's eyedropper feature. */
}

.sidebar ol li p {
    color: #2e7aa4; /* The icy slate blue from the image using the eyedropper in Visual Studio.*/
}
/* #endregion */




/* #region Finalizing Fixes and Hacks */
/* Self-clearing floats (from the clearfix hack article)*/
.mod, .section:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.section {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
/* #endregion */